<template>
	<view>
 
		<view class="uni-container">
			<view class="uni-flex uni-row myheader" style="-webkit-justify-content: space-between;justify-content: space-between;display:flex">
				<view class="text">
					<view class="uni-list-cell-db" style="-webkit-justify-content: space-between;justify-content: space-between;display:flex">
						<uni-icons type="left"  class="termInfo" size="36"  @click="doLeft"></uni-icons>
						<picker @change="bindWeekChange" :value="weekIndex" :range="weekArray" range-key="name">
							<view class="uni-input">{{weekArray[weekIndex].name}}</view>
						</picker>
						<uni-icons type="right" class="termInfo" size="36"  @click="doRight"></uni-icons>
					</view>
				</view>
					
				<view class="text" @click="goConfig" style="-webkit-justify-content: space-between;justify-content: space-between;display:flex" >
					 
				       <uni-icons type="gear" class="termInfo" size="36"></uni-icons>
			 
				</view>
			</view>
			

			<uni-table border stripe emptyText="暂无更多数据" class="table_x">
							<!-- 表头行 -->
							<uni-tr>
								
								<uni-th width="50"   align="center">{{beginMonth}}月</uni-th>
								<uni-th width="50" align="center" v-for="(item) in weekDateArr"  v-html="item"></uni-th>
	 
	 
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item,index) in courseDataArr" :key="index">
								<uni-td align="center" v-html="item.tm" ></uni-td>
								
								<uni-td v-if="item.c1 && index%2==0"   @click="goModify(0,index)"  align="center"  :class="item.bc1"  :rowspan=2   v-html="item.c1" ></uni-td>
								<uni-td v-if="!item.c1  && index%2==0"  @click="goModify(0,index)" align="center" :rowspan=1></uni-td>
								<uni-td v-if="!item.c1  && index%2!=0 && !courseDataArr[index-1].c1" align="center" :rowspan=1></uni-td>
								// #ifdef  App
							    <uni-td v-if="!item.c1  && index%2!=0 && courseDataArr[index-1].c1"  align="center" :class="courseDataArr[index-1].bc1" :rowspan=0  v-html="courseDataArr[index-1].c1" ></uni-td>
								// #endif
								
								<uni-td v-if="item.c2 && index%2==0"   @click="goModify(1,index)"  align="center"  :class="item.bc2"  :rowspan=2 v-html="item.c2" ></uni-td>
								<uni-td v-if="!item.c2  && index%2==0"  @click="goModify(1,index)" align="center" :rowspan=1></uni-td>
								<uni-td v-if="!item.c2  && index%2!=0 && !courseDataArr[index-1].c2"   align="center" :rowspan=1></uni-td>
								// #ifdef  App
     							<uni-td v-if="!item.c2  && index%2!=0 && courseDataArr[index-1].c2"   align="center"  :class="courseDataArr[index-1].bc2" :rowspan=0   v-html="courseDataArr[index-1].c2"></uni-td>
								// #endif
								
								<uni-td v-if="item.c3 && index%2==0"   @click="goModify(2,index)"  align="center"  :class="item.bc3"  :rowspan=2 v-html="item.c3" ></uni-td>
								<uni-td v-if="!item.c3  && index%2==0"  @click="goModify(2,index)" align="center" :rowspan=1></uni-td>
								<uni-td v-if="!item.c3  && index%2!=0 && !courseDataArr[index-1].c3"   align="center" :rowspan=1></uni-td>
								// #ifdef  App
							    <uni-td v-if="!item.c3  && index%2!=0 && courseDataArr[index-1].c3"  align="center"  :class="courseDataArr[index-1].bc3" :rowspan=0  v-html="courseDataArr[index-1].c3"></uni-td>
								// #endif
								
								<uni-td v-if="item.c4 && index%2==0"   @click="goModify(3,index)"  align="center"  :class="item.bc4"  :rowspan=2 v-html="item.c4" ></uni-td>
								<uni-td v-if="!item.c4  && index%2==0"  @click="goModify(3,index)" align="center" ></uni-td>
								<uni-td v-if="!item.c4  && index%2!=0 && !courseDataArr[index-1].c4"   align="center"></uni-td>
								// #ifdef  App
								<uni-td v-if="!item.c4  && index%2!=0 && courseDataArr[index-1].c4"  align="center" :rowspan=0 v-html="courseDataArr[index-1].c4"></uni-td>
								// #endif
								
								<uni-td v-if="item.c5 && index%2==0"   @click="goModify(4,index)"  align="center"  :class="item.bc5"  :rowspan=2 v-html="item.c5" ></uni-td>
								<uni-td v-if="!item.c5  && index%2==0"  @click="goModify(4,index)" align="center" ></uni-td>
								<uni-td v-if="!item.c5  && index%2!=0 && !courseDataArr[index-1].c5"   align="center"></uni-td>
								// #ifdef  App
								<uni-td v-if="!item.c5  && index%2!=0 && courseDataArr[index-1].c5"  align="center" :rowspan=0 v-html="courseDataArr[index-1].c5"></uni-td>
								// #endif
								
								<uni-td v-if="item.c6 && index%2==0"   @click="goModify(5,index)"  align="center"  :class="item.bc6"  :rowspan=2 v-html="item.c6" ></uni-td>
								<uni-td v-if="!item.c6  && index%2==0"  @click="goModify(5,index)" align="center" ></uni-td>
								<uni-td v-if="!item.c6  && index%2!=0 && !courseDataArr[index-1].c6"   align="center"></uni-td>
								// #ifdef  App
								<uni-td v-if="!item.c6  && index%2!=0 && courseDataArr[index-1].c6"  align="center" :rowspan=0 v-html="courseDataArr[index-1].c6"></uni-td>
								// #endif
								
								<uni-td v-if="item.c7 && index%2==0"   @click="goModify(6,index)"  align="center"  :class="item.bc7"  :rowspan=2 v-html="item.c7" ></uni-td>
								<uni-td v-if="!item.c7  && index%2==0"  @click="goModify(6,index)" align="center" ></uni-td>
								<uni-td v-if="!item.c7  && index%2!=0 && !courseDataArr[index-1].c7"   align="center"></uni-td>
								// #ifdef  App
								<uni-td v-if="!item.c7  && index%2!=0 && courseDataArr[index-1].c7"  align="center" :rowspan=0 v-html="courseDataArr[index-1].c7"></uni-td>	
								// #endif 
							</uni-tr>
						</uni-table>
		</view>
	</view>
</template>

<script>
function getToday(type) {
	const date = new Date();

	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();

	if (type === 'start') {
		year = year - 10;
	} else if (type === 'end') {
		year = year + 10;
	}
	month = month > 9 ? month : '0' + month;;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day}`;
}
function formatDate(date) {
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
 
	month = month > 9 ? month : '0' + month;;
	day = day > 9 ? day : '0' + day;

	return `${month}-${day}`;
}
function formatFullDate(date) {
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
 
	month = month > 9 ? month : '0' + month;;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day}`;
}
function getWeekStartDate(date1) {	
	//let date1= new Date();
	let weekDay1 = date1.getDay();
	let timestamp1 = date1.getTime();
	console.log("timestamp1",timestamp1);
	if (weekDay1!=1){
		if (weekDay1>1){
			date1 = new Date(timestamp1-(weekDay1-1)*(1000 * 60 * 60 * 24));
		}else if (weekDay1==0){
			date1 = new Date(timestamp1-(7-1)*(1000 * 60 * 60 * 24));
		}
	}
	return date1;
}	
export default {
	data() {
		return {
			timeArr:["8:00","9:00","10:10","11:10","14:30","15:30","16:40","17:40","19:20","20:20"],
			courseDataArr:[{
				tm:'1<br><font color="00ADF9">8:00</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'2<br><font color="00ADF9">9:00</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'3<br><font color="00ADF9">10:10</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'4<br><font color="00ADF9">11:10</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'5<br><font color="00ADF9">14:30</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'6<br><font color="00ADF9">15:30</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'7<br><font color="00ADF9">16:40</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'8<br><font color="00ADF9">17:40</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'9<br><font color="00ADF9">19:20</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			},
			{
				tm:'10<br><font color="00ADF9">20:20</font>',c1:null,c2:null,c2:null,c3:null,c4:null,c5:null,c6:null,c7:null,bc1:null,bc2:null,bc2:null,bc3:null,bc4:null,bc5:null,bc6:null,bc7:null
			}
			],
 
			termData:{sdate:getToday({format: true}),edate:getToday({format: true}),courseList:[]},
			termIndex:0,
			termName:null,
			termStart:null,
			termEnd:null,
			termArray:[{name:'第一学期'},{name: '第二学期'}, {name:'第三学期'}, {name:'第四学期'},{name:'第五学期'},{name: '第六学期'}, {name:'第七学期'}, {name:'第八学期'}],
			weekArray:[],//周列表
			weekNum:1,
			weekIndex:0,
			beginMonth:1,
			weekDateArr:[], //table标题行的每天日期
			weekDays:["周一","周二","周三","周四","周五","周六","周日"],
			timeTableData:{"course":null,"classRoom":null,"memo":null},
			oneDayTimeTableData:{tm:0,data:[{},{},{},{},{},{},{},{},{},{}]},
			startTimestamp:null,
			spanArr1:[],
			pos1:0,
		}
	},
	onLoad(option) {
		if (option.startTimestamp){
			this.startTimestamp=parseInt(option.startTimestamp);
			this.initCourseTable(new Date(this.startTimestamp));
		}else{
			this.initCourseTable(new Date());
		}
		
		this.loadTermStorage();
		
		//this.handleData(); 
	},
	methods: {
		doLeft(){
			if (this.weekIndex>0){
				this.weekIndex--;
				let tmpStartDate = new Date(this.weekArray[this.weekIndex].startTimestamp);
				this.initCourseTable(tmpStartDate);
				this.loadTimeTableData();
			}
		},
		doRight(){
			if (this.weekIndex<this.weekArray.length-1){
				this.weekIndex++;
				let tmpStartDate = new Date(this.weekArray[this.weekIndex].startTimestamp);
				this.initCourseTable(tmpStartDate);
				this.loadTimeTableData();
				
			}
		},
		getCourseObj(val){
			let rtn ={"name":val,"index":"_1"};
			if (this.termData.courseList && this.termData.courseList.length>0){
				let index=0;
				this.termData.courseList.forEach(item=>{
					console.log("courseObj",item);
					if (item.value==val){
						rtn.name = item.text;
						rtn.index =index+"";
					}
					index++;
				})
			}
			return rtn;
		},
		loadTimeTableData(){
			//清空已有表格数据内容
			for (var i=0;i<7;i++){
				for (var tmIndex=0;tmIndex<10;tmIndex++){
					this.courseDataArr[tmIndex]["c"+(i+1)]=null;
					this.courseDataArr[tmIndex]["bc"+(i+1)]="td_item_1";
				}
			}
			//按天加载每日数据
			let startTimestamp = this.weekArray[this.weekIndex].startTimestamp;
			for (var i=0;i<7;i++){
				let tmpDate = new Date(startTimestamp+i*(1000 * 60 * 60 * 24));
			    let key = "timeTable:"+formatFullDate(tmpDate); 
				console.log("key",key);
				uni.getStorage({
					key: key,
					success: (res) => {
						this.oneDayTimeTableData= res.data;
						console.log("key",key);
						console.log("res.data",res.data);
						for (var tmIndex=0;tmIndex<10;tmIndex++){
							if (this.oneDayTimeTableData.data[tmIndex].course|| this.oneDayTimeTableData.data[tmIndex].classRoom|| this.oneDayTimeTableData.data[tmIndex].memo){
								let courseValue = (this.oneDayTimeTableData.data[tmIndex].course)?this.oneDayTimeTableData.data[tmIndex].course:"";
								let course="";
								let courseIndex="_1";
								if (courseValue!=""){
									let courseObj = this.getCourseObj(courseValue);
									course = courseObj.name;
									courseIndex =courseObj.index;
								}
								let classRoom = (this.oneDayTimeTableData.data[tmIndex].classRoom)?"@"+this.oneDayTimeTableData.data[tmIndex].classRoom:"";
								let memo = (this.oneDayTimeTableData.data[tmIndex].memo)?"※"+this.oneDayTimeTableData.data[tmIndex].memo:"";
								let tmp=course+classRoom+memo
								let maxLength =30;
								if (tmp.length>maxLength){
									tmp =tmp.substring(0,maxLength-3)+"...";
								}
								let dayIndex=0;
								if (this.oneDayTimeTableData.tm){
									console.log("this.oneDayTimeTableData.tm",this.oneDayTimeTableData.tm)
								    let tmpDate =new Date(parseInt(this.oneDayTimeTableData.tm));
									console.log("tmpDate",tmpDate)
									dayIndex = tmpDate.getDay()-1;
									console.log("dayIndex",dayIndex)
									if (dayIndex==-1){
										dayIndex=6;
									}
								}
								console.log("val("+dayIndex+","+tmIndex+")="+tmp)
								this.courseDataArr[tmIndex]["c"+(dayIndex+1)]=tmp;
								this.courseDataArr[tmIndex]["bc"+(dayIndex+1)]="td_item"+courseIndex;
								//this.courseDataArr[tmIndex+1]["c"+(dayIndex+1)]=tmp;
								//this.courseDataArr[tmIndex+1]["bc"+(dayIndex+1)]="td_item"+courseIndex;
								//this.handleData();
							}
							
		                }
						//this.handleData();
					},
				})
			}
			//this.$forceUpdate();
		},
		goModify(dayIndex,timeIndex){
			let startTimestamp = this.weekArray[this.weekIndex].startTimestamp;
			uni.navigateTo({
			  url: '../ctableModify/ctableModify?dayIndex='+dayIndex+"&timeIndex="+timeIndex+"&startTimestamp="+startTimestamp // 跳转到对应路径的页面
			});
		},
		initCourseTable(_date){
			console.log("_date",_date);
			this.weekDateArr=[];
			let date1= getWeekStartDate(_date);
			this.beginMonth =date1.getMonth()+1;	
			for (var i=0;i<7;i++){
				let tmpDate = new Date(date1.getTime()+i*(1000 * 60 * 60 * 24));
				console.log("tmpDate",tmpDate);
				if (tmpDate.getDate()==1 && (tmpDate.getMonth()+1!=this.beginMonth) ){
					let tmpStr = (tmpDate.getMonth()+1)+"月<br>"+this.weekDays[i];
					this.weekDateArr.push(tmpStr)
				}else{	
					let tmpStr = tmpDate.getDate()+"日<br>"+this.weekDays[i];
					this.weekDateArr.push(tmpStr)
				}
			}				
		},
		loadTermStorage: function () {
			let key ="termIndex";				
			uni.getStorage({
				key: key,
				success: (res) => {
					this.termIndex= res.data;
					this.termName =this.termArray[this.termIndex].name;
					this.loadTermData();
				},
				fail: () => {
					uni.showModal({
						title: '请先配置学期数据!',
						showCancel:false
					})
					this.goConfig();
				}
			})
			 
		},
		loadTermData: function () {
			let key ="termData"+this.termIndex;
			uni.getStorage({
				key: key,
				success: (res) => {
					console.log(res.data)
					this.termData= res.data;
					this.termStart=this.termData.sdate.substring(0,this.termData.sdate.length);
					this.termEnd=this.termData.edate.substring(0,this.termData.sdate.length);
					if ( res.data.courseList==null){
						this.termData.courseList=[];
					}
					// 根据学期起止日期，计算周数和每周开始日期
					//得到学期开始日期的周一的日期
					var date1 = new Date(this.termData.sdate);
					var startDateTime = date1.getTime();
					var date1 = getWeekStartDate(new Date(this.termData.sdate));
					let timestamp1 = date1.getTime();
					//得到结束日期的下周一日期
					var date2 = new Date(this.termData.edate);
					var endDateTime = date2.getTime();
					var timestamp2 = date2.getTime();
					let weekDay2 = date2.getDay();
					if (weekDay2==0){//如果是周日
						date2 = new Date(timestamp2+(1000 * 60 * 60 * 24));
					}else{//如果不是周日
						date2 = new Date(timestamp2+(8-weekDay2)*(1000 * 60 * 60 * 24));
					}
					timestamp2 = date2.getTime()+(1000 * 60 * 60 * 24);
					console.log("修订后timestamp1",timestamp1);
					console.log("修订后timestamp2",timestamp2);
					this.weekNum = Math.floor((timestamp2-timestamp1)/ (1000 * 60 * 60 * 24*7)) ;
					console.log("weekNum",this.weekNum);
					let currentDate = new Date();
					let currentTimestamp = currentDate.getTime();
					
			        this.weekIndex=-1
					for (var i=0;i<this.weekNum;i++){
						let name ="第"+(i+1)+"周";
						let startTimestamp = timestamp1 + i*  (1000 * 60 * 60 * 24*7);
						let endTimestamp = timestamp1 + i*  (1000 * 60 * 60 * 24*7) +(1000 * 60 * 60 * 24*6);
						if (this.startTimestamp){
							if (this.startTimestamp>=startTimestamp && this.startTimestamp<=endTimestamp){
								this.weekIndex =i;
							}
						}else{
							if (currentTimestamp>=startTimestamp && currentTimestamp<=endTimestamp){
								this.weekIndex =i;
							}
						}
						
						let realStartTime = startTimestamp;
						if (realStartTime<startDateTime){
							realStartTime = startDateTime;
						}
						let realStartDate =new  Date(realStartTime);
						let tmpStartStr = formatDate(realStartDate);
						
						let realEndTime = endTimestamp;
						if (realEndTime>endDateTime){
							realEndTime = endDateTime;
						}
						let realEndDate =new  Date(realEndTime);
						let tmpEndStr = formatDate(realEndDate);										 
						console.log(name+"("+tmpStartStr +"~"+tmpEndStr +")")
						
						let tmpData = {"name":name+"("+tmpStartStr +"~"+tmpEndStr +")","startTimestamp":startTimestamp};
						if (currentTimestamp>=startTimestamp && currentTimestamp<=endTimestamp){
							tmpData = {"name":"★"+name+"("+tmpStartStr +"~"+tmpEndStr +")","startTimestamp":startTimestamp};
						}
						this.weekArray.push(tmpData);
					}
		            //如果当前周为空，则新增一行”其他“
					if (this.weekIndex==-1){
						let date1=getWeekStartDate(new Date());
						let tmpData = {"name":"其他","startTimestamp":date1.getTime()};
						this.weekArray.push(tmpData);
						this.weekIndex =this.weekNum;
					}
					//加载课程表
					this.loadTimeTableData();
			 
				},
				fail: () => {
					uni.showModal({
							title: '请先配置当前学期数据!',
							showCancel:false
					})
					this.goConfig();
				}
			})	 
		},
					
		goConfig(){
			uni.navigateTo({
			  url: '../config/config' // 跳转到对应路径的页面
			  //url: '../tableDemo/tableDemo' // 跳转到对应路径的页面
			});
		},
		bindWeekChange(e){
			console.log('picker发送选择改变，携带值为：' + e.detail.value)
			this.weekIndex = e.detail.value
			let tmpStartDate = new Date(this.weekArray[this.weekIndex].startTimestamp);
			this.initCourseTable(tmpStartDate);
			this.loadTimeTableData();
			
		},
		handleData() {
				// this.dataRowSpan.forEach(item)
				this.courseDataArr.forEach((item, index) => {
					console.log(item,"item")
					for (let key in item) {
					   if (key.startsWith("c") && item[key]!=null){
						   item.rowspan = 2;
					   }
					}
				});

		},
		 
	}
}
</script>

<style>
/* #ifndef H5 */
/* page {
	padding-top: 85px;
} */
/* #endif */
.myheader{
	padding: 15rpx;
}
.uni-container{
	padding:5rpx;
}
.td_item_1{
   //background-color: yellow;
}
.td_item0{
   background-color: #6EA4FE;
}
.td_item1{
   background-color: #D08CBC;
}

.td_item2{
   background-color: #BE8CE3;
}
.td_item3{
   background-color: #98E0AD;
}
.td_item4{
   background-color: #FFB41F;
}
.td_item5{
   background-color: #0EB8EE;
}
.td_item6{
   background-color: #86C417;
}
.td_item7{
   background-color: #FF788E;
}
.td_item8{
   background-color: #6DDDC2;
}
.td_item9{
   background-color: brown;
}

.uni-table {
table-layout: fixed;
white-space: wrap;


}
.uni-table-td {
  table-layout: inherit;
  //overflow: hidden;
  white-space: wrap; 
 
}

.uni-table-th {
  width: 80rpx;  
  box-sizing: content-box;
}
.table_x{
	width: 100%;
}
.termInfo{
	padding:10rpx;
}
</style>
